<template>
  <div class="alread_audit">
    <head-top head-title="房屋审核" go-back="true"></head-top>
    <p v-if="code === 400" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      {{errorText}}
    </p>
    <div class="alread_main" v-if="code === 200">
      <!--搜索part-->
      <div class="search_part">
        <div class="box_input">
          <img src="../images/btn_search@2x.png" alt="">
          <input type="text" @keyup.enter="searchOwner"  @input="searchOwner" v-model="keyword" placeholder="搜索业主名">
        </div>
      </div>
      <ul v-for="(item, findex) in auditList" :key="findex">
        <div class="village_title"><span>{{item.title}}</span></div>
        <li v-for="(audit,index) in item.data" :key="index" @click="$router.push('/my/AuditDetail/'+audit.id)">
          <div class="owner_main">
            <div class="owner">
              <span>业主姓名：{{audit.real_name}}</span>
              <span>状态：
                <span class="green_color">{{audit.status=2?'已通过':''}}</span>
              </span>
            </div>
            <p>联系方式：{{audit.phone}}</p>
            <p>所在小区：{{audit.roomNumber}}</p>
          </div>
        </li>
      </ul>
      <div class="default1" v-if="flag">
        <p>抱歉！暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../../header/Header.vue'
  import {HomeAuditList} from '../../../api/my'
  import {Indicator} from 'mint-ui'

  export default {
    name: 'AlreadAudit',
    data () {
      return {
        page: 2,
        auditList: [],
        flag: false,
        code: {
          type: Number
        },
        errorText: '',
        keyword: ''
      }
    },
    created () {
      this._HomeAuditList()
    },
    methods: {
      _HomeAuditList() {
        Indicator.open({
          text: '..加载中..',
          spinnerType: 'fading-circle'
        })
        HomeAuditList(this.page).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.auditList = res.data
            this.code = res.code
            if (this.auditList.length === 0) {
              this.flag = true
            } else {
              this.flag = false
            }
          }
          if (res.code === 400) {
            this.code = res.code
            this.errorText = res.error
            Indicator.close()
          }
        })
      },
      // 搜索
      searchOwner() {
        Indicator.open({
          text: '..搜索中..',
          spinnerType: 'fading-circle'
        })
        HomeAuditList(this.page, this.keyword).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.auditList = res.data
            this.code = res.code
            if (this.auditList.length === 0) {
              this.flag = true
            } else {
              this.flag = false
            }
          }
          if (res.code === 400) {
            Indicator.close()
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
.alread_audit{
  padding-top: 50px;
  .alread_main{
    .search_part{
      padding: 10px;
      .box_input{
        display: inline-flex;
        align-items: center;
        background: white;
        border: 1px solid #0c7ad9;
        border-radius: 20px;
        width: 100%;
        img{
          width: 20px;
          height: 20px;
          margin: 0 10px;
        }
        input{
          background: white;
          border: none;
          outline: none;
          padding: 10px 0;
          font-size: 15px;
          color: #999999;
        }
      }
    }
    ul{
      .village_title{
        width: 100%;
        background: #e6e6e6;
        padding: 10px 0;
        span{
          color: #292929;
          font-size: 15px;
          margin-left: 15px;
          letter-spacing: 3px;
        }
      }
      li{
        padding: 7px;
        .owner_main{
          box-shadow: 0 0 3px rgba(0,0,0,0.3);
          padding: 10px;
          border-radius: 5px;
          .owner{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 15px;
            padding: 2px 0 7px 0;
            .green_color{
              color: #00c96c;
            }
          }
          p{
            font-size: 14px;
            padding-top: 10px;
            color: #545454;
          }
        }
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 140px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 180px;
      }
    }
  }
}
</style>
